<template>
  <div class="goods-list">
    <!-- <router-link tag="div" to="home/goodsinfo" class="goods-item" v-for="item in goodList" :key="item.docid">
      <div class="img-warp"><img :src="item.picInfo.length>0?item.picInfo[0].url:'https://i8.mifile.cn/a1/pms_1527735134.03584233!560x560.jpg'"/></div>
      <h3>{{item.title}}</h3>
      <div class="info">
        <div class="price">
          <span class="x-price">￥2195</span>
          <span class="y-price">￥2499</span>
        </div>
        <div class="sell">
          <span>热卖中</span>
          <span>剩60件</span>
        </div>
      </div>
    </router-link> -->
    <!-- 在网页中，有两种跳转方式 -->
    <!-- 方式1：使用 a 标签的形式叫做标签跳转 -->
    <!-- 方式2：使用 window.location.href 的形式，叫做编程式导航 -->
    <div class="goods-item" v-for="item in goodList" :key="item.docid" @click="goDetail(item.docid)">
      <div class="img-warp"><img :src="item.picInfo.length>0?item.picInfo[0].url:'https://i8.mifile.cn/a1/pms_1527735134.03584233!560x560.jpg'"/></div>
      <h3>{{item.title}}</h3>
      <div class="info">
        <div class="price">
          <span class="x-price">￥2195</span>
          <span class="y-price">￥2499</span>
        </div>
        <div class="sell">
          <span>热卖中</span>
          <span>剩60件</span>
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data(){
    return{
      goodList:[],
      data:{},
    }
  },
  created(){
    this.getGoodsList()
  },
  methods:{
    getGoodsList(){
        this.$http.get('https://www.apiopen.top/journalismApi')
        .then(result=>{
            //var response = Mock.mock(result.body)
            var response = result.body
            if(response.code == 200){
                console.log('length==',response.data.tech.length)
                this.data = response.data
                this.goodList = response.data.tech
                //console.log(this.newsList)
            } else {    
                Toast('加载新闻列表失败')
            }
        })
    },
    getMore(){
      this.goodList = this.goodList.concat(this.data.auto)
    },
    goDetail(id){
      //使用JS的形式进行路由导航
      //注意：一定要区分 this.$route 和 this.$router 这两个对象
      //其中：this.$route是路由【参数对象】，所以路由中的参数，params,query都属于他
      //其中：this.$router 是一个路由【导航对象】，用它可以方便的使用JS代码，实现
      //路由的前进、后退、跳转到新的 URL 地址
      //1.最简单的
      //this.$router.push('/home/goodsinfo/'+id)
      //2.传递对象
      //this.$router.push({path:'/home/goodsinfo/'+id})
      //3.传递命名的路由
      this.$router.push({name:'goodsinfo', params:{id}})
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-list{
  display: flex;
  flex-wrap:wrap;
  padding:7px;
  justify-content: space-between;
  .goods-item{
    width:49%;
    border:1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin:3px 0;
    padding:2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    .img-warp{
      display:flex;
      align-items: center;
    }
    img{
      width:100%;
    }
    h3{
      font-size:14px;
      padding:2px;
    }
    .info{
      background-color: #eee;
      .price{
        padding:3px;
        .x-price{
          color:red;
          font-weight: bold;
          font-size:16px;
        }
        .y-price{
          color:gray;
          font-size:12px;
          text-decoration: line-through;
          margin-left:10px;
        }
      }
      .sell{
        padding:3px;
        color:gray;
        font-size:12px;
        display: flex;
        justify-content: space-between;
      }
    }
    
  }
}
</style>

